<template>
  <div>
    <div class="out">
      <Head />
      <div class="Rectangle57">
        <div class="title">{{ $t('m.当前登陆地址') }}</div>
        <div class="font">0x4379066D6eaeC5D03AAB0a959CC9047a844Daf63</div>
        <div class="Frame17">
          <div>
            <div class="title">{{ $t('m.累计订单金额') }}</div>
            <div class="text">2634.00</div>
          </div>
          <div>
            <div class="title">{{ $t('m.昨日收益') }}</div>
            <div class="text">56.36</div>
          </div>
          <div>
            <div class="title">{{ $t('m.价格') }}</div>
            <div class="text1">100U-1000U</div>
          </div>
        </div>
      </div>
      <div class="inv">
        <div
          style="display: flex;justify-content: space-between;align-items: center; margin: 0 12px;"
        >
          <div style="display: flex;">
            <div>
              <img
                src="../../assets/img/money.png"
                alt=""
                style=" width: 24px;
  height: 24px;"
              />
            </div>
            <div class="label_title">
              {{ $t('m.我的资产') }}
            </div>
          </div>
          <div
            class="label_title1"
            style="display: flex;justify-content: center;align-items: center;"
          >
            {{ $t('m.收益明细') }}
            <img src="../../assets/img/righty.png" alt="" />
          </div>
        </div>
        <div class="Rectangle58">
          <div
            style="display: flex;justify-content: center;align-items: center;"
          >
            <div>
              <img
                src="../../assets/img/t.png"
                alt=""
                style=" width: 50px; height: 52px;"
              />
            </div>
            <div style="margin-left: 12px;">
              <div
                style="color: rgba(255, 255, 255, 0.6);font-family: PingFang SC;font-size: 12px;"
              >
                {{ $t('m.USDT收益') }}
              </div>
              <div
                style="color: rgba(253, 253, 253, 1);
  font-family: Outfit;
  font-weight: 500;
  font-size: 24px;"
              >
                5214.6920
              </div>
            </div>
          </div>
          <div>
            <van-button
              block
              color="#2AD49E"
              class="btn"
              round
              @click="copy(info.inviteUrl)"
              >{{ $t('m.提取') }}</van-button
            >
          </div>
        </div>
      </div>
      <div style="display: flex;margin-top: 24px;">
        <div>
          <img
            src="../../assets/img/money.png"
            alt=""
            style=" width: 24px;height: 24px;"
          />
        </div>
        <div class="label_titles">
          {{ $t('m.我的订单') }}
        </div>
      </div>
      <div class="boxs">
        <div class="row">
          <div class="col">{{ $t('m.启动时间') }}</div>
          <div class="col">{{ $t('m.金额') }}</div>
          <div class="col">{{ $t('m.已产出') }}</div>
          <div class="col">{{ $t('m.剩余时间') }}</div>
        </div>
        <div
          class="row1"
          v-for="(item, index) in list"
          :key="index"
          :style="index % 2 == 1 ? ' background: rgba(255, 255, 255, 1)' : ''"
        >
          <div class="col">{{ item.createtime }}</div>
          <div class="col">{{ item.money1 }}</div>
          <div class="col">{{ item.money2 }}</div>
          <div class="col">{{ item.day }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  pass: true,
  name: 'index',
  data() {
    return {
      list: [
        {
          createtime: '2024/04/15',
          money1: '500 USD',
          money2: '320 USD',
          day: '85天',
        },
      ],
      // key: value
    }
  },
  mounted() {},
  created() {},
}
</script>

<style lang="less" scoped>
.labels {
  margin-top: 24px;
  .flex-row();

  img {
    margin-right: 8px;
    width: 24px;
    height: 24px;
    vertical-align: sub;
  }

  color: #eaeae8;
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 17px;
}
.row {
  padding: 15px 15px;
  margin-top: 20px;
  .flex-between();
  .col {
    color: #ffffff99;
    font-family: PingFang SC;
    font-size: 12px;
    text-transform: uppercase;
  }
}
.row1 {
  .flex-between();
  box-sizing: border-box;

  background: rgba(46, 50, 53, 0.1);

  .col {
    padding: 10px;
    color: #ffffff99;
    font-family: Outfit;
    font-size: 13px;
    text-transform: uppercase;
  }
}
.label_titles {
  color: rgba(234, 234, 232, 1);
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 17px;
  margin-left: 10px;
}
.btn {
  width: 70px;
  height: fit-content;
  display: inline-flex;
  place-content: center;
  place-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 19px;
  background: rgba(42, 212, 158, 1);
  color: #000 !important;
}
.inv {
  padding: 10px 0 0 0;
  background: url('../../assets/img/inv.png');
  background-size: 100% 100%;
  .label {
    .flex-row();
    text-align: left;
    color: #ffffffe6;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 17px;
    img {
      width: 24px;
      height: 24px;
      margin-right: 12px;
    }
  }
  .label_title {
    color: rgba(255, 255, 255, 0.9);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 17px;
    margin-left: 10px;
  }
  .label_title1 {
    color: rgba(242, 195, 21, 1);
    font-family: PingFang SC;
    font-size: 15px;
  }
  .Rectangle58 {
    padding: 14px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 82px;
    border-radius: 20px;
    background: rgba(69, 69, 69, 0.1);
    backdrop-filter: blur(88.199997px);
  }
}
.Rectangle57 {
  top: 116px;
  left: 10px;
  width: 355px;
  height: 128px;
  border-radius: 20px;
  border-width: 1px;
  border-style: solid;
  border-image-source: conic-gradient(
    from 180deg at 50% 50%,
    rgba(249, 132, 39, 0.6) 43.2deg,
    rgba(255, 255, 255, 0.03) 133.95deg,
    rgba(255, 255, 255, 0) 179.36deg,
    rgba(42, 212, 158, 0.6) 225.65deg,
    rgba(255, 255, 255, 0) 270.75deg,
    rgba(255, 255, 255, 0) 313.24deg,
    rgba(255, 255, 255, 0) 359.85deg
  );
  border-image-slice: 1;
  box-sizing: border-box;
  background: radial-gradient(
      18.17% 149.38% at 100% -23.21%,
      rgba(42, 212, 158, 0.2) 0%,
      rgba(42, 212, 158, 0) 100%
    ),
    rgba(6, 17, 19, 1);
  backdrop-filter: blur(88.199997px);
  .Frame17 {
    width: 335px;
    height: fit-content;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 52px;
    flex-shrink: 0;
    padding: 12px 0px;
    border-radius: 8px;
    background: rgba(69, 69, 69, 0.3);
    backdrop-filter: blur(88.199997px);
    margin: 0 auto;
    .title {
      color: rgba(255, 255, 255, 0.6);
      font-family: PingFang SC;
      font-size: 12px;
      margin: 0;
    }
    .text {
      color: rgba(255, 255, 255, 1);
      font-family: Outfit;
      font-weight: bold;
      font-size: 13px;
      line-height: 20px;
    }
    .text1 {
      color: rgba(238, 232, 10, 1);
      font-family: Outfit;
      font-weight: bold;
      font-size: 13px;
      line-height: 20px;
    }
  }
  .title {
    margin-top: 12px;
    text-align: center;
    color: rgba(81, 242, 194, 1);
    font-family: PingFang SC;
    font-size: 12px;
  }
  .font {
    margin-top: 4px;
    margin-bottom: 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-family: Outfit;
    font-weight: 300;
    font-size: 12px;
  }
}
</style>
